import React, { useState, useEffect } from "react";
import { message } from "antd";

import { getFontList as getFontListApi } from "@api";

import Popup from "@components";

import QR from "./shirkhan-qr.jpg";

const pageLimit = 3;

const font = new FontFace(
  "uighurfont",
  "url(https://ws-static-cdn.subat.cn/public/ug/fonts/UKIJEkran_Regular/UKIJEkran_Regular.woff2)"
);
font.load();
document.fonts.add(font);

function getFontList(fontdata) {
  return (
    Object.keys(fontdata).map((key) => {
      const font = fontdata[key];
      return {
        ...font,
        name: font.nameing_table.fullName.en,
      };
    }) || []
  );
}

const App = () => {
  const [loading, setLoading] = useState(true);
  const [pageSize, setPageSize] = useState(1);
  const [fontData, setFontData] = useState({
    fontdata: {},
    fontlist: [],
  });

  useEffect(() => {
    getFontListApi().then((response) => {
      if (response.status !== 200) {
        message.error({
          content: "获取字体列表时失败",
        });
        console.log(response);
      }

      //如果成功
      const fontdata = response.data.data;
      const fontlist = getFontList(fontdata);

      setFontData({
        fontdata,
        fontlist,
      });

      setLoading(false);
    });
  }, []);

  function handleMore(e) {
    console.log("hello wrold");
    const maxPage = Math.round((fontData.fontlist.length + 2) / pageLimit);
    if (pageSize > maxPage) {
      message.warning({
        content: "ئەمدى قالمىدى",
      });
      return;
    }
    setLoading(true);
    setTimeout(() => {
      setPageSize((size) => size + 1);
      setLoading(false);
    }, 300);
  }

  function handleDownload(fontName) {
    message.info("你选择了" + fontName);
  }

  function handleFontChange(fontName) {
    message.info("你选择了" + fontName);

    const fontlist = fontData.fontlist.map((font) => {
      if (font.name === fontName) {
        font.checked = true;
      } else {
        font.checked = false;
      }
      return font;
    });

    setFontData({
      fontdata: fontData.fontdata,
      fontlist: fontlist,
    });
  }

  function onSearch(value) {
    let fontlist = [];

    if (value.length > 0) {
      fontlist = fontData.fontlist.filter(({ name }) => {
        return name.toLocaleLowerCase().indexOf(value) !== -1;
      });
    } else {
      fontlist = getFontList(fontData.fontdata).slice(0, pageSize * pageLimit);
    }

    setFontData({
      fontdata: fontData.fontdata,
      fontlist: fontlist,
    });
  }

  return (
    <div style={{ width: "800px", height: "600px", background: "#ccc" }}>
      <Popup
        header={
          <Popup.Update
            moreUrl={true}
            downloadUrl={true}
            downloadCrxUrl={true}
          />
        }
        fontlist={fontData.fontlist.slice(0, pageSize * pageLimit)}
        loading={loading}
        onLoadMore={handleMore}
        onDownloadClick={handleDownload}
        onFontChange={handleFontChange}
        onSearch={onSearch}
        qr={QR}
      />
    </div>
  );
};

export default App;
